<template>
<div>
  <MyTable :list="list">
    <template #header>
      <th>#</th>
      <th>商品名称</th>
      <th>价格</th>
      <th>标签</th>
      <th>操作</th>
    </template>
    <template #value="scope">
        <td>{{scope.row.id}}</td>
        <td>{{ scope.row.goods_name}}</td>
        <td>{{ scope.row.goods_price}}</td>
        <td>
          <button v-if="!scope.row.inputVisible" class="btn btn-primary" @click="scope.row.inputVisible=!scope.row.inputVisible">
            +Tag
          </button>
          <input  ref="TagsInput"
                  v-gfocus class="tag-input form-control"
                  style="width:100px"
                  v-model="tagsValue"
                  v-if="scope.row.inputVisible"
                  @blur="scope.row.inputVisible=false"
                  @keydown.enter="inputTag(scope.row.id,scope.row)"
                  @keydown.esc="this.tagsValue=''"
          >
          <span  v-for="(str, ind) in scope.row.tags" :key="ind"
                  class="btn btn-danger">
                    {{ str }}
          </span>
        </td>
        <td>
          <button class="btn btn-danger btn-sm" @click="delebtn(scope.row.id)">删除</button>
        </td>
    </template>
  </MyTable>
</div>
</template>

<script>
import MyTable from "@/components/MyTable.vue";

import axios from "axios";
import {nextTick} from "vue";
axios.defaults.baseURL = "https://applet-base-api-t.itheima.net";
export default {
  name: "MyGoodsList",
  components: {MyTable},
  created(){
    axios({url:"/api/goods"
    }).then(res=>{
      this.list=res.data.data
      console.log(this.list)
    })
  },
  data(){
    return {
      list:[],
      booo:true,
      tagsValue:""
    }
  },
  methods:{
    delebtn(id){

     let index=this.list.findIndex(obj=>obj.id==id)
      this.list.splice(index,1)
    },
    inputTag(id,obj){
      if (this.tagsValue.trim().length==0){
        alert("不能输入空白字符")

        setTimeout( ()=>{
         obj.inputVisible=true
        },1)
      }else{
        let index = this.list.findIndex(obj=>obj.id==id);
        this.list[index].tags.push(this.tagsValue)
        this.tagsValue=""
      }
    }

  }
}
</script>

<style scoped>

</style>